<template>
  <div id="academy">
    <div style="width: 100%; height: 130px; ">
      <!-- 过滤表单 -->
      <el-form :inline="true" :model="form" size="mini">
        <el-form-item label="用户名:">
          <el-input
            v-model="form.username"
            placeholder="如：张三"
            class="itemWidth"
          ></el-input>
        </el-form-item>

        <el-form-item label="类型:">
          <el-select clearable v-model="form.userType" class="itemWidth">
            <el-option label="教师" value="0"></el-option>
            <el-option label="学生" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="真实姓名:">
          <el-input
            v-model="form.realName"
            placeholder="如：张三"
            class="itemWidth"
          ></el-input>
        </el-form-item>

        <el-form-item label="电话号码:">
          <el-input
            v-model="form.phone"
            placeholder="13*********"
            class="itemWidth"
          ></el-input>
        </el-form-item>

        <el-form-item label="学校:">
          <el-input
            v-model="form.school"
            placeholder="DGUT"
            class="itemWidth"
          ></el-input>
        </el-form-item>

        <el-form-item label="学院:">
          <el-select
            clearable
            v-model="form.department"
            class="itemWidth"
            v-on:change="getGrade"
          >
            <el-option
              v-for="item in departmentList"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="年级:">
          <el-select
            clearable
            v-model="form.grade"
            placeholder="请选择"
            class="itemWidth"
          >
            <el-option v-for="item in grades" :key="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="专业:">
          <el-select
            clearable
            v-model="form.major"
            class="itemWidth"
            v-on:change="getClass"
          >
            <el-option
              v-for="item in majorList"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级:">
          <el-select v-model="form.className" class="itemWidth">
            <el-option
              clearable
              v-for="item in classList"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否打卡:">
          <el-radio-group v-model="isFinished">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择日期:">
          <el-date-picker
            v-model="date"
            type="date"
            size="mini"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <!--   导出数据成excel     -->
        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出Excel</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格展示 -->
      <ShowTable :tableList="tableList" v-on:childGetSelect="parentGetSelect">
        <el-table-column type="selection" width="80" slot="select">
        </el-table-column>
      </ShowTable>

      <el-button type="text" v-on:click="down">下载表格</el-button>
      <el-pagination background layout="prev, pager, next" :total="page.total" 
        @current-change='currentChange'
        :current-page.sync="page.currentPage"
        style="display: inline-block;">
      </el-pagination>
      
      <el-dialog title="表格预览" :visible.sync="visible" width="80%" >
        <!-- 弹出框表格展示 -->
        <ShowTable :tableList="selectData" tableId="outTable" />
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" v-on:click="sureDown">导 出</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDepartments, getMajors, getClass, clock,downloadClockAsExcel } from "@/network/index.js";
import ShowTable from "@/components/common/showTable.vue";
import FileSaver from "file-saver";
import XLSX from "xlsx";
// import Excel from "xlsx"
export default {
  name: "Academy",
  components: {
    ShowTable,
  },
  data() {
    return {
      form: {
        username: "",
        userType: "",
        realName: "",
        phone: "",
        school: "",
        department: "",
        grade: "",
        className: "",
        major: "",
      },
      //分页的信息
      page:{
        total:0,
        currentPage:1
      },
      departmentList: [],
      grades: [2017, 2018, 2019, 2020],
      majorList: [],
      classList: [],
      isFinished: "1",
      date: "",
      tableList: [],
      selectData: [], //选中的表格数据
      visible: false,
    };
  },
  
  methods: {
    //导出excel，类似于/clock只是不分页，直接下载文件
    exportExcel(){
      let token = this.$store.getters.getToken;
      //过滤表格
      let temp = {};
      Object.keys(this.form).forEach((key) => {
        if (this.form[key] != "" && this.form[key] != null)
          temp[key] = this.form[key];
      });

      downloadClockAsExcel(token, temp, this.isFinished, this.date)
          .then((res) => {
            let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'})
            let url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            link.download = `打卡情况名单.xlsx` // 重命名文件
            link.click()
            URL.revokeObjectURL(url) // 释放内存
          })
          .catch((err) => {
            console.warn(err);
          });

    },
    currentChange(){
      this.onSubmit();
    },
    sureDown() {
      var xlsxParam = { raw: true };
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#outTable"),
        xlsxParam
      );
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          new Date().format("yyyy-MM-dd") + "-打卡详情.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      this.visible = false;
      return wbout;
    },
    open(message, type) {
      this.$message({
        message,
        type,
      });
    },
    down() {
      if (this.selectData.length <= 0) {
        this.open("请先选择数据", "warning");
      } else {
        this.visible = true;
      }
    },
    parentGetSelect(v) {
      this.selectData = v;
    },
    onSubmit() {
      let token = this.$store.getters.getToken;
      //过滤表格
      let temp = {};
      Object.keys(this.form).forEach((key) => {
        if (this.form[key] != "" && this.form[key] != null)
          temp[key] = this.form[key];
      });

      clock(token, temp, this.isFinished, this.page.currentPage, this.date)
        .then((res) => {
          if (res.data.code >= 200 && res.data.code < 300) {
            this.tableList = res.data.data.records;
            console.log(res.data);
            this.page.total = res.data.data.total;
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          console.warn(err);
        });
    },
    //获取班级名
    getClass(e) {
      let token = this.$store.getters.getToken;
      getClass(token, this.form.department, e)
        .then((res) => {
          if (res.data.code >= 200 && res.data.code < 300) {
            this.classList = res.data.data;
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          console.warn(err);
        });
    },
    getGrade(e) {
      //e 获取学院名
      //根据学院获取专业list
      let token = this.$store.getters.getToken;
      getMajors(token, e)
        .then((res) => {
          if (res.data.code == 200) {
            this.majorList = res.data.data;
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          console.warn(err);
        });
    },
  },
  created() {
    let token = this.$store.getters.getToken;
    //1、获取所有学院
    {
      getDepartments(token)
        .then((res) => {
          if (res.data.code == 200) {
            this.departmentList = res.data.data;
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          console.warn(err);
        });
    }
  },
};
</script>

<style scoped>
.itemWidth {
  width: 100px;
}
</style>
